@import "compass";

// Configuration
$smashing-direction: right !default;
$smashing-max-width: 1200px !default;
$smashing-min-width: 960px !default;
$smashing-cushion: 2.5% !default;
$smashing-devine: false !default;

// Layout variables
$smashing-divine-proportion: $smashing-min-width / 1.62;
$smashing-sidebar-width: 400px;
$smashing-sidebar-width-divine: floor($smashing-min-width - $smashing-divine-proportion);
$smashing-negative-sidebar-width: -(ceil($smashing-sidebar-width));
$smashing-negative-sidebar-width-divine: -(ceil($smashing-sidebar-width-divine));

@mixin smashing-layout {
  @include smashing-width;
  @include smashing-padding;
  @include smashing-content; }

// Sets a div's width to behave like the width of +smashing-layout
// Assumes an inner wrapping div .width
@mixin smashing-width {
  & {
    width: 100%; }
  .width {
    @include pie-clearfix;
    margin: 0 auto;
    min-width: $smashing-min-width;
    max-width: $smashing-max-width;
    padding: {
      right: $smashing-cushion;
      left: $smashing-cushion; }; } }

// Used only in +smashing-layout
@mixin smashing-padding {
  .padding {
    @include box-sizing(border-box);
    @include pie-clearfix;
    @if $smashing-devine {
      padding-#{$smashing-direction}: $smashing-sidebar-width-divine; }
    @else {
      padding-#{$smashing-direction}: $smashing-sidebar-width; }
    width: 100%; } }

// Used only in +smashing-layout
@mixin smashing-content {
  .primary, .secondary {
    @include box-sizing(border-box);
    @if $smashing-direction == right {
      @include float-left; }
    @else {
      @include float-right; } }
  .primary {
    width: 100%; }
  .secondary {
    @if $smashing-devine {
      margin-#{$smashing-direction}: $smashing-negative-sidebar-width-divine;
      width: $smashing-sidebar-width-divine; }
    @else {
      margin-#{$smashing-direction}: $smashing-negative-sidebar-width;
      width: $smashing-sidebar-width; } } }
